<template>
  <!-- 我的收藏 -->
  <div>
    <NavigationComponent />
    <SearchInput @sortListClick="getSortListClick">
      <template v-slot:search>
        <!-- 搜索 -->
        <el-input placeholder="请输入搜索内容" :prefix-icon="Search" v-model="searchValue" class="inputClass"
          @keyup.enter.native="getTableData('reset')">
        </el-input>
      </template>
    </SearchInput>

    <!-- 内容 -->
    <div class="table_box">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        :row-style="{ height: '52px' }" :header-row-style="{ height: '52px' }" @row-dblclick="handleRowDblClick">
        <el-table-column label="文件名" prop="realName" show-overflow-tooltip sortable>
          <!-- <template slot-scope="fileName">
            <svg-icon :icon-class="selectSvgIcons(fileName.row)" style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
            <span class="realName_class">
              {{ `${fileName.row.realName}${fileName.row.suffix ? '.' : ''}${fileName.row.suffix || ''} ` }}
            </span>
          </template> -->

          <template #default="scope">
            <svg-icon :icon-class="selectSvgIcons(scope.row)"
              style="font-size: 30px; vertical-align: middle; margin-right: 6px"></svg-icon>
            <span class="realName_class">
              {{ `${scope.row.realName}${scope.row.suffix ? '.' : ''}${scope.row.suffix || ''} ` }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="path" label="文件来源">
          <template #default="scope">
            <span>团队文档</span>
            <!-- {{ sourceList[pageType] }} -->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable> </el-table-column>

        <el-table-column prop="size" label="大小" sortable>
          <template #default="scope">{{ proxy?.$yuUtils.filterSizeUnit(scope.row.size) }}</template>
        </el-table-column>

        <el-table-column prop="deleteBy" label="操作" fixed="right" align="center">
          <template v-slot="collect">
            <el-tooltip effect="dark" content="取消收藏">
              <span @click.stop="CancelCollection(collect.row)">
                <svg-icon v-if="collect.row.collection == '0'" icon-class="collect" class="icon_size"></svg-icon>
                <svg-icon v-else icon-class="collect-fill" class="icon_size"></svg-icon>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="getSizeChange" @current-change="getPageChange" :current-page="commonParams.page"
      :page-sizes="[10, 20, 30, 40]" :page-size="commonParams.size" layout="total, prev, pager, next, sizes"
      :total="commonParams.total" />
  </div>
</template>

<script setup lang="ts">
import { ApiPerCceefiilllnoost, ApiPerCancelCollection, ApiPerGetParentTreeNodeAll } from '@/api/personDoc/personDocApi'
import { ref, reactive, onMounted, watch, defineProps, defineEmits, getCurrentInstance } from 'vue'
import { Search } from '@element-plus/icons-vue'
import NavigationComponent from './components/navigation-title.vue' // 导航信息
import SearchInput from './components/search-input.vue' //搜索
const { proxy } = getCurrentInstance() as any
const router = useRouter()

const searchValue = ref('')

const sourceList = reactive({
  personal: '个人文档',
  team: '团队文档',
  enterprise: '企业文档'
})

const tableData = ref([])
const commonParams = reactive({
  page: 1,
  size: 10,
  total: 0,
  sort: { sortDesc: 'create_time' } as any
})

const props = defineProps({
  pageType: String
})

/**icon转换 */
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v)
}
// 排序点击
const getSortListClick = (val: any) => {
  if (val.valueIndex == 0) {
    commonParams.sort = { sortDesc: 'create_time' }
  } else {
    if (val.title == '文件名称') {
      commonParams.sort = val.valueIndex == 1 ? { nameSort: 'ASC' } : { nameSort: 'DESC' }
    } else {
      commonParams.sort = { ...val.value[val.valueIndex - 1] }
    }
  }
  getTableData('')
}

// 获取table列表数据
const getTableData = async (reset) => {
  if (reset == 'reset') {
    commonParams.page = 1
    commonParams.size = 10
  }
  let oParam = {
    page: commonParams.page - 1,
    size: commonParams.size,
    fileType: 1,
    realName: null
  }
  // 搜索输入框
  if (searchValue.value) {
    oParam.realName = searchValue.value
  }

  let oParams = { ...oParam, ...commonParams.sort }
  const res = await ApiPerCceefiilllnoost(oParams)
  tableData.value = res.data.rows
  commonParams.total = res.data.total
}

// 表格点击行
const handleRowDblClick = async (row: any) => {
  let oParam = {
    id: row.id,
    fileType: 1
  }

  const res = await ApiPerGetParentTreeNodeAll(oParam)
  let expandedKeys = res.data.map((item) => {
    let obj = {
      id: parseInt(item.id),
      label: item.realName
    }
    return obj
  })
  sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys))

  router.push({
    path: '/newUi/teamKnowdge/teamFile',
    query: { headNodeId: expandedKeys[0].id, teamId: row.teamId }
  })

  // console.log(row, oParam, '点击行');
}

//取消收藏
const CancelCollection = (row: any) => {
  let oParam = {
    treeNodeId: row.id,
    fileType: 1
  }
  ApiPerCancelCollection(oParam).then((res) => {
    if (res.code == 200) {
      ElMessage.success('取消收藏成功')
      getTableData('reset')
    }
  })
  console.log(row, '取消收藏')
}

// 切换页数
const getSizeChange = (val: any) => {
  commonParams.size = val
  getTableData('')
}

//切换条数
const getPageChange = (val: any) => {
  commonParams.page = val
  getTableData('')
}

onMounted(() => {
  getTableData('reset')
})
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
  border: none;
  outline: none;
}

.table_box {
  overflow: auto;
  height: calc(100vh - 210px);
  margin-left: 20px;

  .svg-icon {
    font-size: 18px;
  }

  .realName_class {
    line-height: 40px;
  }
}

.el-pagination {
  // margin-top: 25px;
  padding: 0px 16px;
}

.path {
  font-size: 14px;
  color: #606266;
  padding: 20px 0 0;
}

.icon_size {
  cursor: pointer;
}
</style>
